<template>
  <div class="bookDetail">
    <el-row>
      <el-col :span="6">
        <el-button @click="goBack">返回</el-button>
      </el-col>
      <el-col :span="6" :offset="12">
        <el-input
          placeholder="输入书名/作者"
          v-model="searchQuery"
          clearable
          @clear="handleSearchClear"
          @keyup.enter.native="handleSearch"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch"
          />
        </el-input>
      </el-col>
    </el-row>
    <el-table
      border
      :data="borrowInfoList"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="isbn" label="ISBN" align="center">
      </el-table-column>
      <el-table-column prop="coverUrl" label="图片" align="center">
        <template slot-scope="scope">
          <img :src="getSrc(scope.row.coverUrl)" alt="" style="width: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="bookName" label="书名" align="center">
      </el-table-column>
      <el-table-column prop="callNumber" label="索书号" align="center">
      </el-table-column>
      <el-table-column prop="press" label="出版社" align="center">
      </el-table-column>
      <el-table-column prop="author" label="作者" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="success">待还</el-tag>
          <el-tag v-if="scope.row.status === 1" type="danger">已还</el-tag>
          <el-tag v-if="scope.row.status === 2">已延期</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="expectedReturnTime"
        label="预计归还时间"
        align="center"
      >
        <template slot-scope="scope">
          {{ $moment(scope.row.expectedReturnTime).format("YYYY-MM-DD HH:mm") }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            :disabled="scope.row.status === 1"
            @click="returnBook(scope.row)"
            type="text"
            size="small"
            >还书</el-button
          >
          <el-button
            :disabled="scope.row.status === 1 || scope.row.status === 2"
            @click="renew(scope.row)"
            type="text"
            size="small"
            >续借</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px; text-align: center"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      :layout="
        isMobile ? 'prev, pager, next' : 'total, prev, pager, next, sizes'
      "
      :small="isMobile"
      :total="pagination.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "BorrowInfo",
  data() {
    return {
      borrowInfoList: [],
      searchQuery: "",
      pagination: {
        currentPage: 1,
        pageSizes: [10],
        pageSize: 10,
        total: 0,
      },
      isMobile: false,
    };
  },
  mounted() {
    this.checkScreenSize();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  created() {
    console.log("type");
    this.fetchBorrowInfoList();
  },
  methods: {
    handleResize() {
      this.checkScreenSize();
    },
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768;
    },
    goBack() {
      this.$router.push("/home");
    },
    getSrc(coverUrl) {
      if (coverUrl) {
        return coverUrl;
      } else {
        return this.defaultCover;
      }
    },
    // 还书
    async returnBook(row) {
      const response = await this.$request.post("/api/book/returnBook", {
        bookshelfId: row.bookshelfId,
        username: localStorage.getItem("username"),
        id: row.id,
      });
      console.log(response);
      if (response.code == 200) {
        this.$message.success("还书成功！");
        this.fetchBorrowInfoList();
      } else {
        this.$message.error(response.message);
      }
    },
    async renew(row) {
      const response = await this.$request.post("/api/book/renew", {
        id: row.id,
        expectedReturnTime: row.expectedReturnTime,
      });
      console.log(response);
      if (response.code == 200) {
        this.$message.success("续借成功！");
        this.fetchBorrowInfoList();
      } else {
        this.$message.error(response.message);
      }
    },
    handleSearchClear() {
      this.searchQuery = "";
      this.fetchBorrowInfoList();
    },
    handleSearch() {
      this.pagination.currentPage = 1;
      this.fetchBorrowInfoList();
    },
    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      this.fetchBorrowInfoList();
    },
    async fetchBorrowInfoList() {
      const params = {
        search: this.searchQuery,
        curPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        username: localStorage.getItem("username"),
      };
      if (this.$route.params.type == "all") {
        const response = await this.$request.get("/api/borrowInfo/list/all", {
          params: params,
        });
        if (response.code == 200) {
          console.log("all", response.data.records);
          this.borrowInfoList = response.data.records;
          this.pagination.total = response.data.total;
        }
      } else if (this.$route.params.type == "waiting") {
        const response = await this.$request.get(
          "/api/borrowInfo/list/waiting",
          {
            params: params,
          }
        );
        if (response.code == 200) {
          console.log("waiting", response.data.records);
          this.borrowInfoList = response.data.records;
          this.pagination.total = response.data.total;
        }
      }
    },
  },
};
</script>

<style scoped>
/* 让图片自适应单元格宽度 */
.el-table img {
  max-width: 100%; /* 图片最大宽度不超过容器 */
  height: auto; /* 高度自动保持比例 */
  display: block; /* 避免行内元素的额外间距 */
  margin: 0 auto; /* 水平居中 */
}
</style>